/*
    应用中心-镜像管理模块
    create by xyr on 2017.09.26
 */

<template>
  <div class="app-container">
    <el-row class="wrapper mirror">
      <el-col :span="24" class="warp-main">
        <div class="el-bar">
          <p>
            <i class="iconfont icon-users"></i>镜像仓库</p>
          <el-tabs v-model="tabs" type="card" @tab-click="PublicZone" style="margin:10px auto;">
            <!--私有空间.start-->
            <el-tab-pane label="私有空间" name="first">
              <el-form :inline="true" :model="privateForm" class="demo-form-inline">
                <el-form-item>
                  <el-input v-model="privateForm.queryKey" placeholder="请输入搜索关键字"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button icon="el-icon-search" type="primary" @click="privateSearchButton">搜索</el-button>
                  <el-button icon="el-icon-download" type="primary" @click="downImageParaTemplate">镜像参数批量维护模板</el-button>
                  <el-button icon="el-icon-download" type="primary" @click="downImagePara">镜像参数文件</el-button>
                  <el-upload ref="uploadFile" 
                  :action="uploadAction" 
                  :headers="uploadHeaders" 
                  :multiple="false" 
                  :auto-upload="true" 
                  :show-file-list="false" 
                  :limit="1" 
                  :on-success="handleAvatarSuccess" 
                  :on-error="handleAvatarError" 
                  :before-upload="beforeAvatarUpload" 
                  :on-exceed="handleExceed" style="display:inline-block;">
                    <el-button icon="el-icon-upload" size="small" type="primary">镜像参数批量维护(文件上传)</el-button>
                  </el-upload>
                </el-form-item>
              </el-form>
              <!--数据列表-->
              <el-table :data="privateTableData" v-loading="loadingPrivateTableData" style="width: 100%">
                <el-table-column type="expand">
                  <template slot-scope="scope">
                    <!--扩展的数据列表.start-->
                    <v-child-table :scope="scope" :afterDeleteFun="queryPrivateRepository"></v-child-table>
                    <!--扩展的数据列表.end-->
                  </template>
                </el-table-column>
                <el-table-column prop="repoName" label="镜像名称" sortable></el-table-column>
                <el-table-column prop="repoType" label="类型" width="160px" sortable></el-table-column>
                <!-- <el-table-column prop="version" label="版本数"  sortable></el-table-column> -->
                <el-table-column prop="pullCount" label="下载次数" width="160px" sortable></el-table-column>
                <el-table-column prop="tip" label="操作" sortable>
                  <template slot-scope="scope">
                    <!-- <el-button size="small" @click="privateSet(scope.$index, scope.row)" class="small">{{scope.row.repoType=='公有'?'私有化':'公有化'}}
                                                        </el-button> -->
                    <el-button size="small" icon="el-icon-tickets" @click="openInageVersionDescribedDailog(scope.$index, scope.row)" class="small">版本明细</el-button>
                    <el-button type="primary" size="small" @click="openSetImageParamDailog(scope.$index, scope.row)" class="small iconfont icon-msnui-shezhi">设置参数</el-button>
                    <el-button type="success" size="small" @click="deployAppByImage(scope.$index, scope.row)" class="small iconfont icon-bushu">部署应用</el-button>
                    <el-button type="danger" size="small" @click="imageDel(scope.$index, scope.row)" class="small iconfont icon-shanchu3">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <!-- 私有空间.end -->

            <!--公有空间.start-->
            <!-- <el-tab-pane v-show="showPublicPane" label="公有空间" name="second" class="common" >
                                            <el-col :span="24" class="toolbar">
                                                <el-form :inline="true" :model="publicForm" style="position:relative;">
                                                    <el-form-item>
                                                        <el-input v-model="publicForm.queryKey" placeholder="请输入搜索关键字"></el-input>
                                                    </el-form-item>
                                                    <el-form-item>
                                                        <el-button type="primary" @click="publicSearchButton">搜索</el-button>
                                                    </el-form-item>
                                                </el-form>
                                                <el-table :data="publicTableData" style="width: 100%">
                                                    <el-table-column type="expand" class="table_width">
                                                            <template slot-scope="scope">
                                                        <v-child-table :slot-scope="scope" :deleteBtnDisabled="true"></v-child-table>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column prop="repoName" label="镜像名称" sortable></el-table-column>
                                                    <el-table-column prop="pullCount" label="下载次数" sortable></el-table-column>
                                                    <el-table-column prop="tip" label="操作" sortable>
                                                        <template slot-scope="scope">
                                                            <el-button size="small" @click="openSetImageParamDailog(scope.$index, scope.row)" class="small">设置参数</el-button>
                                                            <el-button size="small" @click="deployAppByImage(scope.$index, scope.row)" class="small">部署应用</el-button>
                                                        </template>
                                                    </el-table-column>
                                                </el-table>
                                            </el-col>
                                        </el-tab-pane> -->
            <!-- 公有空间.end -->
          </el-tabs>

          <!-- 设置镜像参数对话框.start -->
          <el-dialog title="设置镜像参数" :modal="true" width="90%" :visible.sync="setImageParamDialogVisible" :close-on-click-modal="false" class="canshu" style="margin:20px 0;">
            <image-base :pageAction="pageAction" :targetImageName="targetImageName"></image-base>
          </el-dialog>
          <!-- 设置镜像参数对话框.end -->

          <!-- 镜像所有版本明细table.start -->
          <el-dialog title="镜像版本明细" :modal="true" :visible.sync="imageAllVersionDescrebedDialogVisible">
            <el-table v-loading="loadingImageVersionDescribedDataTable" :data="imageVersionDescribedTableData" highlight-current-row border style="width: 100%;margin-top:10px;">
              <el-table-column :show-overflow-tooltip="true" prop="image" label="镜像">
              </el-table-column>
              <el-table-column prop="version" label="版本">
              </el-table-column>
              <el-table-column prop="user" label="维护者">
              </el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="described" label="描述">
              </el-table-column>
              <el-table-column prop="lastUpdateTime" label="最后更新时间">
              </el-table-column>
            </el-table>
          </el-dialog>
          <!-- 镜像所有版本明细table.end -->

        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import VChildTable from "@/components/private-repository-table/VChildTable";
import imageBase from "@/components/appCenter/appManage/imageBase";
import { appManagement } from '@/utils/appManagement'; // 应用管理工具类
export default {
  components: { VChildTable, imageBase },
  data() {
    return {
      filters: {
        name: ""
      },
      tabs: "first",
      privateForm: {
        queryKey: "",
        spaceName: ""
      },
      publicForm: {
        queryKey: "",
        spaceName: ""
      },
      form: {
        desc: ""
      },

      // 私有空间s数据
      privateTableData: [],

      // 私有空间扩展数据
      // privateExtendData: [],

      // 公有空间扩展数据
      publicExtendData: [],

      // 公有空间的数据
      publicTableData: [],
      sels: [],
      // 是否加载私有空间table
      loadingPrivateTableData: false,

      //////////////设置镜像参数////////////////////
      // 是否显示设置镜像参数的对话框
      setImageParamDialogVisible: false,
      // 设置参数动作
      pageAction: this.projectConfig.APP_MANAGE_PLUGIN_ATCION_SET_IMAGE,
      // 镜像名称
      targetImageName: '',
      // 显示公有镜像仓库
      showPublicPane: false,
      ////////////////////////////////镜像版本明细///////////////////////
      imageAllVersionDescrebedDialogVisible: false,
      loadingImageVersionDescribedDataTable: false,
      imageVersionDescribedTableData: [],
      // 上传文件动作头部
      uploadHeaders: {
        "X-Token": this.$store.getters.token
      }
      
    };
  }, // data end
  created() {
    // 查询镜像库
    this.queryPrivateRepository();
    this.queryPublicRepository();
    // this.publicExtendSearch();
  }, // end of created

  methods: {
    // 页面加载,根据头部选择的空间,获得镜像库信息
    //私有空间界面
    queryPrivateRepository() {
      // 获得头部菜单栏选择的空间
      let _selectedNamespace = this.$store.getters.namespace;
      if (
        _selectedNamespace != "" &&
        typeof _selectedNamespace != "undefined"
      ) {
        // 加载table
        this.loadingPrivateTableData = true;
        // 查询
        this.privateForm.spaceName = _selectedNamespace;
        this.httpClient
          .httpClientget(
          this.projectConfig.URL_API_APP_REPOSITORY_QUERY_PRIVATE_REPOSITORY,
          this.privateForm
          )
          .then(res => {
            this.loadingPrivateTableData = false;
            this.privateTableData = res.data;
          }).catch(error => {
            this.loadingPrivateTableData = false;
          });
      }
    },
    // 公有空间界面
    queryPublicRepository() {
      // 获得头部菜单栏选择的空间
      let _selectedNamespace = this.$store.getters.namespace;
      if (
        _selectedNamespace != "" &&
        typeof _selectedNamespace != "undefined"
      ) {
        // 查询
        this.publicForm.spaceName = _selectedNamespace;
        this.httpClient
          .httpClientget(
          this.projectConfig.URL_API_APP_REPOSITORY_QUERY_PUBLIC_REPOSITORY,
          this.publicForm
          )
          .then(res => {
            this.publicTableData = res.data;
          });
      }
    },

    //     私有空间搜索按钮
    privateSearchButton() {
      this.queryPrivateRepository();
    },

    //     公有空间搜索按钮
    publicSearchButton() {
      this.queryPublicRepository();
    },
    // 公有空间标签触发事件
    PublicZone() {
      this.publicForm.queryKey = "";
      this.privateForm.queryKey = "";
      this.queryPublicRepository();
      this.queryPrivateRepository();
    },
    // 重置页面
    resetPage() {
      // table清空
      this.privateTableData = [];
      this.publicTableData = [];
    },
    // 公私有转换
    privateSet(index, row) {
      // 设置私有化
      if (row.repoType == "公有") {
        this.$confirm("此操作将进行镜像私有化, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            // 执行设置操作
            let param = { repoName: row.repoName, tags: "" };
            this.httpClient
              .httpClientDelete(
              this.projectConfig.URL_API_APP_PRIVATE_IMAGE,
              param
              )
              .then(res => {
                this.queryPrivateRepository();
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消设置"
            });
          });
      }

      // 设置公有化
      if (row.repoType == "私有") {
        this.$confirm("此操作将进行镜像公有化, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            // 执行设置操作
            let param = { repoName: row.repoName, tags: "" };
            this.httpClient
              .httpClientPost(
              this.projectConfig.URL_API_APP_PUBLIC_IMAGE,
              param
              )
              .then(res => {
                this.queryPrivateRepository();
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消设置"
            });
          });
      }
      // 设置公有化--end
    },

    // 删除整体镜像
    imageDel: function(index, row) {
      // deleteImage: function(index, row) {
      // console.log('deleteImage=' + JSON.stringify(row));
      // 删除确认
      this.$confirm("此操作将永久删除此镜像, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 执行删除操作
          let param = { repoName: row.repoName, tags: "" };
          this.httpClient
            .httpClientDelete(
            this.projectConfig.URL_API_APP_DELETE_IMAGE,
            param
            )
            .then(res => {
              this.queryPrivateRepository();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    ///////////////////////////设置镜像参数///////////////////////
    // 打开设置镜像参数的对话框
    openSetImageParamDailog: function(index, row) {
      // 设置镜像名称
      this.targetImageName = row.repoName;
      // 设置动作
      appManagement.setPageAction(this.projectConfig.APP_MANAGE_PLUGIN_ATCION_SET_IMAGE);
      // 打开设置镜像参数的对话框
      this.setImageParamDialogVisible = true;

    },
    // 根据选择的镜像,部署应用
    deployAppByImage: function(index, row) {
      let imageName = row.repoName;
      if (imageName != '' && typeof imageName != 'undefined' && imageName != null) {
        // 设置镜像到缓存
        appManagement.setImageNameOnDeploy(row.repoName);
        // 跳转到部署应用页面
        this.$router.push({
          path: '/apply/management/app_create/image_repertory'
        });
      }
    },
    /////////////////////////////////镜像版本明细/////////////////////////////////
    openInageVersionDescribedDailog: function(index, row) {
      this.imageAllVersionDescrebedDialogVisible = true;
      let imageName = row.repoName;
      if (imageName != '' && typeof imageName != 'undefined') {
        let param = {
          image: row.repoName
        }
        // 获得所有镜像版本说明
        this.loadingImageVersionDescribedDataTable = true;
        this.httpClient.httpClientget(this.projectConfig.URL_API_APP_GET_IMAGE_DESCRIBED, param).then(res => {
          this.loadingImageVersionDescribedDataTable = false;
          this.imageVersionDescribedTableData = res.data;
        })
      }

    },

    //模板下载
    downImageParaTemplate() {
      let url = this.projectConfig.URL_API_APP_IMAGE_PARA_TEMPLATE_DOWNLOAD;
      this.httpClient.httpClientDownloadExcel(url, '镜像参数维护模板').then(res => {
      })
    },

    //参数文件下载
    downImagePara() {
      let ns = this.$store.getters.namespace;
      let url = this.projectConfig.URL_API_APP_IMAGE_PARA_DOWNLOAD + "?namespace=" + ns;
      this.httpClient.httpClientDownloadExcel(url, ns + "_镜像参数列表").then(res => {
      })
    },

    // 上传文件前
    beforeAvatarUpload(file) {
      //console.log(file);
      // 判断文件是否为空
      if (file != null || file != "") {
        let fileName = file.name;
        if (fileName.indexOf("xls") == -1) {
          this.$notify.warning({
            message: "请选择xls文件"
          });
          return false;
        }
      }
      return true;
    },
    // 上传文件成功,回调
    handleAvatarSuccess(res, file) {
      this.$refs.uploadFile.clearFiles();
      //let _code = res.data.statusCode;
      let _msg = res.meta.message;
      if(_msg=='参数设置成功!'){
        this.$notify.success(_msg);
      }else{
        this.$notify.error(_msg);
      }
    },
    // 上传文件,失败
    handleAvatarError(err, file) {
      this.$notify.error("上传文件失败,请重新上传");
      this.$refs.uploadFile.clearFiles();
    },
    // 超出选择文件个数
    handleExceed(files, fileList) {
      this.$notify.warning("只能选择一个文件");
    }

  }, // end of methods
  computed: {
    getCurrentNamespace() {
      return this.$store.getters.namespace;
    },
    uploadAction(){
        //let url=process.env.HOST_NAME+this.projectConfig.URL_API_APP_IMAGE_PARA_UPLOAD;
        let baseUrl=this.httpClient.getApiHostname();
        let url=baseUrl+this.projectConfig.URL_API_APP_IMAGE_PARA_UPLOAD;
        let ns=this.$store.getters.namespace;
        url=url+'?namespace='+ns;
        return url;
    }
  },
  watch: {
    // 监听头部空间选择下拉框,当改变,触发相应的事件
    getCurrentNamespace(val) {
      // 当选择选择头部空间下拉框的时候,触发事件
      // 查询私有镜像库信息
      this.queryPrivateRepository();
      this.queryPublicRepository();
    }
  }
};
</script>
<style>
.mirror .el-table tr {
  text-align: center;
}

.mirror .el-table__body-wrapper {
  overflow: inherit;
}

.mirror .el-time {
  border: 1px solid #eaeaea;
  border-radius: 4px;
}

.mirror .el-bottom {
  padding-bottom: 50px;
  margin-top: 10px;
}


.mirror .el-bar .nbd {
  border-bottom: none;
}


.mirror .el-date-editor--datetimerange {
  border: 1px solid #eaeaea;
  border-radius: 4px;
}

.mirror .el-table .cell {
  padding: 0 0 0 6px;
}

.mirror .el-dialog__body {
  padding: 10px 20px;
}

/* .mirror .el-button--danger {
  position: absolute;
  top: 10px;
  left: 178px;
} */

.mirror .el-dialog__header {
  border-bottom: 1px solid #eaeaea;
}

.mirror .canshu .el-dialog .el-dialog__header {
  position: fixed;
  top: 20px;
  width: 88%;
  background: #fff;
  z-index: 99;
}

.mirror .canshu .el-dialog .el-dialog__body {
  padding-top: 60px;
}

.mirror .small {
  padding: 7px 6px;
  margin-left: 0;
}

.mirror .el-table__expanded-cell {
  padding: 0;
}

.mirror .extend .el-table {
  padding-left: 20px;
}

.mirror .extend {
  border: none;
}

.mirror .el-table-column {
  width: 20%;
}

.mirror .canshu .el-dialog {
  margin-top: 0 !important;
}

.mirror .el-button {
  font-size: 12px !important;
}
</style>
